<template>
	<view class="shoppingdetail">
		<view class="head">
			<view class="swiper-contain">
<!-- 				<view class="back"><text @click="back()" style="font-size: 40upx;" class="iconfont icon-left"></text></view> -->
				<swiper @change="onSwiperChange" class="swiper" :autoplay="autoplay" :interval="interval" :duration="duration"
				 :indicator-dots="true" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<image :src="item" mode="aspectFill" class="swiper-img"></image>
					</swiper-item>
				</swiper>
				<!-- <view class="dots">
					<image class="img" src="/static/img/photoSet.png"></image>
					<text class="count">{{ currentSwiper + 1 }}/{{ swiperList.length }}</text>
				</view> -->
			</view>
			<view class="name">{{ name }}</view>
			
			<view class="tips" v-if="isIntegral">
				<text>兑换说明:</text>
				<text>{{tips}}</text>
			</view>
			
			<view class="price" v-if="!isIntegral">
				<text class="price-unit">￥</text>
				<text class="price-value">{{ price || 0}}</text>
			</view>
			<view class="integral" v-if="isIntegral">
				<text>{{ price || 0}}</text>
				<text>积分</text>
			</view>

			<view class="font" v-if="!isIntegral">
				<text class="iconfont icon-fangxingou"></text>
				<text style="margin-left: 6upx;color: #4c9cfd; font-size: 26upx;">一部手机游甘肃</text>

				<text>全程护航，请放心购买</text>
				<!-- <text style="margin-left: 6upx;">正品保证</text>
				<text class="iconfont icon-check-circle" style="color: #4c9cfd;margin-left: 24upx;"></text>
				<text style="margin-left: 6upx;">诚信商家</text> -->

			</view>

		</view>

		<view class="fahuo">
			<view class="add">
				<text>发货</text>
				<text>甘肃兰州</text>
			</view>
			<view class="mar-price">
				<text>运费</text>
				<text>{{express}}</text>
			</view>
		</view>
		<!-- <view style="display: flex;flex-direction: column;margin-top: 40upx;">
			<image v-for="(item, index) in contents" :key="index" class="image" :src="item" mode="widthFix"></image>
		</view> -->
		<view class="context" v-if="contexts">
			<u-parse :noData="''" :content="contexts"></u-parse>
		</view>
		<footLogo></footLogo>
		<view style="height: 115upx;width: 100%;"></view>
		
		<view class="bottom-bar">
			<view class="bottom-amt" v-if="!isIntegral || canBuy">
				<view class="content">
					<!-- <text style="font-size:28upx;font-family:PingFang SC;color:rgba(128,128,128,1);">总计:</text> -->
					<!-- <text style="font-size: 26upx;font-weight: medium;letter-spacing: -1.3upx;color: rgba(255,94,4,1);" v-if="!isIntegral">￥</text> -->
					<!-- <text style="font-size: 48upx;font-weight: bold;letter-spacing: -2.4upx;color: rgba(255,94,4,1);" v-if="!isIntegral">{{ price || 0 }}</text> -->
					<view class="s-shopping">
						<view class="service font-size" @click="promptVisible = true"  v-if="!isIntegral"><text class="iconfont icon-kefudianhua" style="font-size: 42upx; line-height: 45upx;" ></text><text>客服</text>
						
						
						</view>

						<view class="shopping font-size" @click="shopping"  v-if="!isIntegral"><text class="iconfont icon-gouwuche" style="font-size: 42upx; line-height: 45upx;"></text><text>购物车</text>
							<view class="shopping-position">
								<view class="shopping-spot"><text>{{length||0}}</text></view>
							</view>
						</view>
					</view>
					<text style="font-size: 40upx;font-weight: medium;letter-spacing: -1.3upx;color: rgba(255,94,4,1);" v-if="isIntegral">{{price || 0}}</text>
					<text style="font-size: 26upx;font-weight: bold;letter-spacing: -2.4upx;color: rgba(255,94,4,1);" v-if="isIntegral">积分</text>
				</view>
				<view class="bottom-buy cart" @click="joinShopping"  v-if="!isIntegral">{{'加入购物车'}}</view>
				<view class="bottom-buy" @click="buyNow">{{isIntegral?'立即兑换':'立即购买'}}</view>
			</view>
			
			<view v-if="!canBuy && isIntegral"  class="bottom-buy-spread" @click="goHome">积分不足，去赚积分</view>
		</view>
		<ensure
			:visible.sync="promptVisible" 
			title="175 9979 7420"
			mainColor="rgba(153,153,153,1);" 
			@confirm="clickPromptConfirm" 
			ensure="呼叫" 
			ensureColor="#000!important"
			titleColor="rgba(51,51,51,1)!important" 
			titleSize="48"
			fontWeight="500"
			>
		</ensure>
	</view>
</template>

<script>
	import wxcEclip from '@/components/custom/wxc-elip.vue';
	import uParse from "@/components/gaoyia-parse/parse.vue"
	import footLogo from "@/components/foot-logo/footLogo.vue"
	import ensure from "@/components/confirm/confirm.vue"
	var currentPage = 1;
	export default {
		components: {
			wxcEclip,
			uParse,
			footLogo,
			ensure
		},
		data() {
			return {
				canBuy:false,
				contents: {},
				indicatorColor: '#000',
				indicatorActiveColor: '#fff',
				autoplay: true,
				interval: 5000,
				duration: 500,
				currentSwiper: 0,
				issubmit: false,
				tips: '',
				contexts: '',
				goodsnum: 1,
				message: '',
				item: null,
				swiperList: [],
				name: '',
				price: '',
				isIntegral: false,
				id:'',
				length:'',
				goodsId:'',
				promptVisible: false,
				//运费
				express:''
				
			};
		},
		onLoad: function(option) {
			console.log("option---------->",option)
			this.isIntegral = option.isIntegral == 1 ? true : false
			this.title=option.title
			// this.item = JSON.parse(decodeURIComponent(option.item));
			// console.log(this.item);
			// this.swiperList = this.item.banners;
			// this.contents = this.item.goodsDetails;
			// // this.price = this.item.goodsDetailVo[0].goodsPrice;
			// this.name = this.item.goodsName;
			// this.message = this.name;
			if (this.isIntegral) {
				
				this.getIntegralDetail(option.id,option.integral)
				
			} else {
				this.getCarousel(option.id)
			}
			
		},
		onShow: function() {
			this.getShoppingList()
			//#ifdef H5
			document.title = '购物详情';
			//#endif
		},
		onHide:function(){
			console.log("离开商品详情")
		},
		methods: {
			
			//单个添加购物车
			joinShopping:function(){
				let params = {
					goodsId: this.goodsId,
					num:'1',
					memberId: this.pub.getUserInfo().memberId
					// memberId: this.pub.getUserInfo().memberId || '4f0abd1af84d4168ba27ac00b63fcb2e'
				}
				this.$postApi(this.$path.SAVE_ONE_SHOPPING, params).then(res => {
					console.log("单个添加购物车数据------------->", res.data)
					if (res.data.success) {
						this.getShoppingList()
						this.pub.showError('商品添加成功')
					}
				})
			},
			//获取购物车列表
			getShoppingList:function(){
				let params = {
					memberId: this.pub.getUserInfo().memberId,
					// memberId: this.pub.getUserInfo().memberId || '4f0abd1af84d4168ba27ac00b63fcb2e'
				}
				this.$postApi(this.$path.GET_SHOP_LIST, params).then(res => {
					console.log("购物车列表数据------------->", res.data)
					
					if (res.data.success) {
						
							//展示
							this.length=res.data.data.list.length
							
					}else{
						this.length=0
					}
				})
			},
			//进入购物车
			shopping:function(){
				uni.navigateTo({
					url: '/pages/shopping_new/glance-ShopCart',
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			//呼叫方法
			clickPromptConfirm:function(){
				uni.makePhoneCall({
				    phoneNumber: '17599797420' //仅为示例
				});
				//关闭弹框
				this.promptVisible = false
			},
			goHome:function(){
				uni.redirectTo({
					url: '/pages/home_new/home_new',
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			getIntegralDetail: function(id,integral) {
				let params = {
					id: id
				}
				this.$postApi(this.$path.INTEGRAL_BY_ID, params).then(res => {
					console.log("积分商品详情------------->", res.data)
					
					if (res.data.success) {
						res.data.data.isIntegral = this.isIntegral
						this.contents = res.data
						let items = res.data.data;
						var imglist = items.otherImage.split(';');
						imglist.forEach(item => {
							if(item != ''){
								this.swiperList.push(item)
							}
						})
						
						this.name = items.title;
						this.tips = items.exchangeInstructions;
						this.price = items.needIntegral;
						this.contexts = items.context;
						console.log("integral>",integral)
						if(integral){
							this.canBuy = parseInt(integral) > parseInt(items.needIntegral) ? true : false
						}
						
						console.log("this.swiperList", this.swiperList);
						console.log("this.canBuy",this.canBuy)
					}
				})
			},
			getCarousel: function(id) {
				var that = this;
				var params = {
					id: id
				}
				that.$postApi(that.$path.GET_NEW_COMMODITY_DETAIL, params).then(res => {
					console.log("商品详情返回结果------------->", res.data)
					let items = res.data.data;
					if (res.data.success) {
						this.contents = res.data
						
						let imglist = items.otherImage.split(';')
						imglist.forEach(item => {
							if(item !== ''){
								this.swiperList.push(item)
							}
						})
						this.goodsId = items.travelEbusinessGoodsTemp.goodsId
						let freight = []
						freight.push({
							goodsId: this.goodsId,num: '1',})
						this.getYunFei(freight)
						this.name = items.title;
						this.price = items.travelEbusinessGoodsTemp.specSellingPrice;
						this.id = items.id;
						this.contexts = items.context;
						console.log("items----------->", items);
					}

				});
			},
			onSwiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			buyNow() {
				// if(!this.pub.checkUserInfo()) {
				// 	return
				// }
				// var that = this
				
				uni.setStorage({
					key: 'contents',
					data: this.contents,
					success: function(res) {
						console.log('商品详情缓存success');
					}
				});
				uni.navigateTo({
					url: '/pages/shopping_new/shoppingconfirm',
					animationType: 'pop-in',
					animationDuration: 200
				});
			},
			//获取运费
			getYunFei:function(freight){
				let params = {
					list:freight
				}
				this.$postApi(this.$path.ORDER_FREIGHT,params).then(res=>{
					console.log("获取运费返回结果------------------>",res)
					if(res.data.success){
						this.express = parseFloat(res.data.data).toFixed(2)
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.shoppingdetail {
		background: rgba(247, 247, 247, 1);
		font-size: 34upx;
	}

	.swiper-contain {
		position: relative;
	}

	.head {
		background: #fff;
		position: relative;
		overflow: hidden;
	}

	.context {
		margin-top: 20upx;
		line-height: 100upx;
		background: #fff;
	}

	/* .swiper-contain .back {
	position: absolute;
	top: 70upx;
	left: 25upx;
	color: #fff;
	font-size: 45upx;
	z-index: 20;
} */
	.back {
		position: absolute;
		top: 65upx;
		left: 25upx;
		border-radius: 50%;
		width: 60upx;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.6);

		text {
			font-size: 45upx;
		}

		z-index: 20;
	}

	.swiper {
		min-height: 525upx;
	}

	.swiper-img {
		width: 100%;
		height: 100%;
	}

	.dots {
		position: absolute;
		bottom: 22upx;
		right: 24upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		min-width: 116upx;
		box-sizing: border-box;
		padding-left: 13upx;
		padding-right: 13upx;
		width: auto;
		height: 36upx;
		background-color: #000000;
		border-radius: 18upx;
		opacity: 0.4;
		z-z-index: 9999;
	}

	.dots .img {
		width: 28upx;
		height: 22upx;
	}

	.dots .count {
		font-size: 26upx;
		margin-left: 6upx;
		font-weight: regular;
		line-height: 26upx;
		letter-spacing: 0px;
		color: #ffffff;
	}
	.font-size{
		font-size:24upx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
		line-height: 36upx;
	}
	.s-shopping{
		display: flex;
		flex-direction: row;
		padding: 22upx 32upx 19upx 28upx;
	}
	.service, .shopping{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.shopping{
		margin-left: 46upx;
		position: relative;
	}
	.shopping-position{
		position: absolute;
		left: 42upx;
		top: -10upx;
		z-index: 0;
	}
	.shopping-spot{
		width: 29upx;
		height:29upx;
		background:rgba(255,94,4,1);
		border-radius:50%;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.shopping-spot text{
		font-size:18upx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		margin-left: 5upx;
	}
	.name {
		margin-top: 36upx;
		margin-left: 24upx;
		font-size: 42upx;
		line-height:59upx;
		font-weight: bold;
		letter-spacing: 0px;
		color: #333333;
	}

	.price,.integral {
		margin-left: 24upx;
		margin-top: 14upx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		margin-bottom: 40upx;
		width: auto;
		height: auto;
	}

	.price .price-unit {
		font-size: 24upx;
		line-height: 24upx;
		font-weight: bold;
		letter-spacing: 0px;
		color: #ff5002;
	}

	.price .price-value {
		font-size: 48upx;
		line-height: 48upx;
		font-weight: bold;
		letter-spacing: 0px;
		color: rgba(255, 94, 4, 1);
	}
	.integral{
		text:first-child{
			font-size:40upx;
			font-family:Microsoft YaHei;
			font-weight:bold;
			color:rgba(255,94,4,1);
		}
		text:last-child{
			margin-left: 5upx;
			font-size:22upx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(255,94,4,1);
		}
	}
	.tips {
		display: flex;
		flex-direction: row;
		margin-top: 20upx;
		margin-left: 24upx;
	}

	.font {
		font-size: 30upx;
		font-weight: regular;
		letter-spacing: 0px;
		color: #4c9cfd;
		padding-bottom: 20upx;
		display: flex;
		align-items: flex-end;

		text:first-child {
			font-size: 34upx;
			margin-left: 24upx;
		}

		text:last-child {
			font-size: 22upx;
			margin-left: 10upx;
		}
	}

	.image {
		width: 100%;
		height: auto;
	}

	.bottom-bar {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 110upx;
		position: fixed;
		bottom: 0upx;
		left: 0upx;
	}

	.bottom-bar .bottom-amt {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		box-shadow: 0px 1px 2.9px 0.1px rgba(0, 0, 0, 0.04);
	}

	.bottom-bar .bottom-amt .content {
		margin-left: 24upx;
		display: flex;
		align-items: baseline;
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;

		text {
			margin-right: 6upx;
		}

		// justify-content: space-around;
	}

	.bottom-buy-spread{
		display: flex;
		width: 100%;
		// width: 375upx;
		height: 100%;
		font-size: 36upx;
		font-weight: medium;
		color: #ffffff;
		justify-content: center;
		align-items: center;
		background: linear-gradient(90deg, rgba(249, 140, 45, 1), rgba(255, 94, 4, 1));
		background-blend-mode: normal, normal;
	}
	.bottom-buy {
		display: flex;
		width: 100%;
		// width: 375upx;
		height: 100%;
		font-size: 36upx;
		font-weight: medium;
		color: #ffffff;
		justify-content: center;
		align-items: center;
		background:rgba(255,94,4,1);
		background-blend-mode: normal, normal;
	}
	.cart{
		background:rgba(249,140,45,1);

	}
	.fahuo {
		display: flex;
		margin-top: 20upx;
		background: #fff;
		padding: 20upx 10upx;
		height: 97upx;
		align-items: center;
		text {
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 35upx;
			margin-left: 15upx;
		}

		.add text:first-child {
			color: rgba(153, 153, 153, 1);
		}
	}
	.tips{
		padding-bottom: 20upx;
		font-size:28upx;
		font-family:PingFang SC;
		// font-weight:500;
		color:rgba(128,128,128,1);
		line-height:43upx;
	}
</style>
